<template>
  <div class="markdown-container">
    <MdPreview 
      :modelValue="markdownContent" 
      previewOnly
      :editorId="editorId"
      :toolbars="[]"
      preview-theme="github"
      code-theme="github"
      :noMermaid="false"
      :noKatex="false"
      :noIcons="true"
      style="border: none;"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

// 接收属性
const props = defineProps({
  fileContent: {
    type: String,
    default: ''
  },
  fileUrl: {
    type: String,
    default: ''
  },
  editorId: {
    type: String,
    required: true
  }
});

// 本地状态
const markdownContent = ref(props.fileContent || '');
const loading = ref(false);

// 加载Markdown文件内容
const loadMarkdownContent = async () => {
  if (!props.fileUrl && !props.fileContent) return;
  
  // 如果已经有内容，直接使用
  if (props.fileContent) {
    markdownContent.value = props.fileContent;
    return;
  }
  
  loading.value = true;
  
  try {
    // 尝试使用标准模式
    console.log('尝试使用标准模式加载Markdown文件:', props.fileUrl);
    const response = await fetch(props.fileUrl);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    markdownContent.value = await response.text();
  } catch (error) {
    console.error('标准模式加载Markdown文件失败:', error);
    
    try {
      // 尝试使用no-cors模式
      console.log('尝试使用no-cors模式加载Markdown文件');
      const response = await fetch(props.fileUrl, { 
        mode: 'no-cors',
        credentials: 'omit',
        headers: {
          'Accept': 'text/markdown,text/plain,*/*'
        }
      });
      const text = await response.text();
      markdownContent.value = text;
    } catch (nocorsError) {
      console.error('no-cors模式加载Markdown文件也失败:', nocorsError);
      
      // 如果是CORS错误，显示友好的错误信息
      if (error.toString().includes('CORS')) {
        markdownContent.value = `# 无法加载文件内容

由于跨域限制，无法直接加载文件内容。请尝试以下方法：

1. 下载文件后在本地查看
2. 联系管理员配置正确的CORS头

文件路径: ${props.fileUrl}`;
      } else {
        markdownContent.value = `# 文件加载失败

无法加载Markdown文件内容，请重试。

错误信息: ${error.message}`;
      }
    }
  } finally {
    loading.value = false;
  }
};

// 监听文件内容变化
watch(() => props.fileContent, (newContent) => {
  if (newContent) {
    markdownContent.value = newContent;
  }
});

// 监听文件URL变化
watch(() => props.fileUrl, (newUrl) => {
  if (newUrl && !props.fileContent) {
    loadMarkdownContent();
  }
});

// 组件挂载时加载内容
onMounted(() => {
  loadMarkdownContent();
});
</script>

<style scoped>
.markdown-container {
  height: 100%;
  min-height: 100vh;
}

/* 重点：消除编辑器的左侧编辑区域，只保留预览区域 */
.markdown-container :deep(.md-editor) {
  height: 100%;
  min-height: 100vh;
  border: 0 !important;
  display: flex;
}

.markdown-container :deep(.md-editor-content) {
  margin-left: 0 !important; /* 移除左侧边距 */
  display: flex;
  min-height: 100vh;
  width: 100% !important;
}

.markdown-container :deep(.md-editor-input) {
  display: none !important; /* 隐藏输入区域 */
}

.markdown-container :deep(.md-editor-preview) {
  width: 100% !important; /* 预览区域占满宽度 */
  min-height: 100vh;
  border-left: none !important; /* 移除左侧边框 */
}

.markdown-container :deep(.md-editor-preview-wrapper) {
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 768px) {
  .markdown-container :deep(.md-editor-preview-wrapper) {
    padding: 16px;
  }
  
  .markdown-container {
    min-height: 70vh;
  }
  
  .markdown-container :deep(.md-editor),
  .markdown-container :deep(.md-editor-content),
  .markdown-container :deep(.md-editor-preview) {
    min-height: 70vh;
  }
}
</style> 